<template>
  <div>

    <el-button text @click="dialogFormVisible = true">

      <span>新增</span>
    </el-button>

    <el-dialog v-model="dialogFormVisible" title="Shipping address"> 
      <el-form :model="form">
         <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.tel" autocomplete="off" />
        </el-form-item>
        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-input v-model="form.company" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新房" :label-width="formLabelWidth">
          <el-input v-model="form.newhouse" autocomplete="off" />
        </el-form-item>
        <el-form-item label="二手房" :label-width="formLabelWidth">
          <el-input v-model="form.twohouse" autocomplete="off" />
        </el-form-item>
        <el-form-item label="租房" :label-width="formLabelWidth">
          <el-input v-model="form.Renting" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option label="在职" value="在职" />
            <el-option label="离职" value="离职" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            <span @click="submit">Confirm</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = ref({
  id:"",
  name: '',
  tel: '',
  company: '',
  newhouse: '',
  twohouse: "",
  Renting: "",
  region: '',
  state: '',
})


 const updata=ref(form._rawValue)



defineExpose({
  updata
})
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 400px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>